<template>
  <div id="content">
    <div class="topSearch">
      <p><span>加盟商姓名：<el-input size="small" style="width: 250px" placeholder="请输入加盟商姓名"
                               v-model="params.franchiseeName" clearable></el-input></span></p>
      <p><span>加盟商电话：<el-input size="small" style="width: 250px" placeholder="请输入加盟商电话"
                               v-model="params.franchiseePhone" clearable></el-input></span></p>
      <p><span>状态：<el-select clearable v-model="params.state" style="width: 250px" size="small" placeholder="请选择加盟商状态"
      >
        <el-option value="0" label="正常"></el-option>
        <el-option value="1" label="冻结"></el-option>
      </el-select></span></p>
      <p>
        <el-button size="small" type="primary" @click="_search">查 询</el-button>
        <el-button size="small" type="primary" @click="_add">新增加盟商</el-button>
      </p>
    </div>
    <div class="centerTable">
      <el-table :data="fList" height="calc(100vh - 250px)" border stripe :cell-style="{ 'textAlign': 'center' }"
                :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
        <el-table-column prop="userId" label="编号"></el-table-column>
        <el-table-column prop="franchiseeName" label="姓名"></el-table-column>
        <el-table-column prop="franchiseePhone" label="电话"></el-table-column>
        <el-table-column prop="gender" label="性别">
          <template v-slot:default="scope">
            <span v-if="scope.row.gender=='0'">男</span>
            <span v-else-if="scope.row.gender=='1'">女</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="d" label="证件" width="220px">
          <template v-slot:default="scope">
            <div style="display: flex">
              <el-image v-if="scope.row.cardFront" :src="'https://'+scope.row.cardFront"
                        style="width: 100px;margin-right: 15px"
                        :preview-src-list="['https://'+scope.row.cardFront]"></el-image>
              <el-image v-if="scope.row.cardReverse" :src="'https://'+scope.row.cardReverse" style="width: 100px"
                        :preview-src-list="['https://'+scope.row.cardReverse]"></el-image>
            </div>
          </template>

        </el-table-column>
        <el-table-column label="状态">
          <template v-slot:default="scope">
            <el-tag v-if="scope.row.state==0">正常</el-tag>
            <el-tag v-if="scope.row.state==1" type="danger">冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="openNum" label="已开通门店数量"></el-table-column>
        <el-table-column prop="f" label="门店列表" width="350px">
          <template v-slot:default="scope">
            <el-table :data="scope.row.storeList"
                      v-if="scope.row.storeList"
                      :cell-style="{ 'textAlign': 'center','fontSize': '12px', }"
                      :header-cell-style="{  'fontSize': '12px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }"
            >
              <el-table-column prop="shopId" label="ID"></el-table-column>
              <el-table-column prop="shopName" label="名称"></el-table-column>
              <el-table-column prop="shopAddress" label="地址" show-overflow-tooltip></el-table-column>
            </el-table>
          </template>

        </el-table-column>
        <el-table-column prop="g" label="等级">
          <template v-slot:default="scope">
            <el-tag>{{ scope.row.grade }}</el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="h" label="门店行政区域"></el-table-column>-->
        <el-table-column prop="agreementUrl" label="合作协议">
          <template v-slot:default="scope">
            <el-link v-if="scope.row.agreementUrl" :href="'https://'+scope.row.agreementUrl">下载</el-link>
            <span v-else style="font-size: 12px">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="o" label="操作">
          <template v-slot:default="scope">
            <el-link @click="_edit(scope.row)">编辑</el-link>
            <el-link @click="_freeze(scope.row)" v-if="scope.row.state==0">冻结</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="center" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
    <add-edit-dialog ref="addEdit" @addStatus="receiveMessage"></add-edit-dialog>
  </div>
</template>

<script>
import addressList from "../../assets/js/address";
import addEditDialog from "./componentDialog/franchiseeList/addEditDialog.vue";

export default {
  name: "franchiseList",
  meta: {title: "加盟商列表", icon: "el-icon-s-custom", sort: 5},
  components: {
    addEditDialog
  },
  data() {
    return {
      currentPage: 1,
      totalCount: 0,
      fList: [],
      addressList: addressList,
      params: {
        pageSize: 20,
        pageNumber: 1
      },
    }
  },
  created() {
    this.getFranchiseeList()
  },
  methods: {
    getFranchiseeList() {
      this.$api.franchiseeGetFranchiseeVo(this.params).then(res => {
        this.fList = res.data
        this.totalCount = res.total
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getFranchiseeList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getFranchiseeList()
    },
    _search() {
      this.params.pageNumber = 1
      this.getFranchiseeList()
    },
    receiveMessage(val) {
      if (val == 1) {
        this.getFranchiseeList()
      }
    },
    _add() {
      this.$refs.addEdit.handleOpen('add')
    },
    _freeze(val) {
      this.$confirm('确定冻结该加盟商权益？', '修改加盟商状态', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteRole({id: val.id}).then(res => {
          if (res == 1) {
            this.$message.success('操作成功！')
            this.getFranchiseeList()
          }
        })
      }).catch();
    },
    _edit(val) {
      this.$refs.addEdit.handleOpen(val)
    }
  }
}
</script>

<style scoped lang="less">
.topSearch {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;

  p {
    margin-right: 20px;
  }
}

.el-link {
  text-decoration: underline;
  font-size: 12px;
  margin-right: 8px;
}

.el-button {
  background-color: #303e9d;
  border: none;
}
</style>